<template>
<!--        <div :class="isCollapse ? 'barItemCollapse' : 'barItem'">-->
    <div class="barItem">
        <el-sub-menu :index="barItem.routeTo" class="elMenuItemClass" v-if="barItem.children != undefined">
            <template #title>
                <component :is="barItem.iconType" class="itemLogo"></component>
                <span v-if="!isCollapse" class="itemSpan">{{barItem.meta.title}}</span>
            </template>
            <el-menu-item :index="item.routeTo" class="elSubMenuItemClass" v-for="item in barItem.children.filter(res => {return !res.children})" :key="item.id">
                <component :is="item.iconType" class="itemLogo"></component>
                <span class="itemSpan">{{item.meta.title}}</span>
            </el-menu-item>
            <el-sub-menu :index="item.routeTo" v-for="item in barItem.children.filter(res => {return res.children})">
                <template #title>
                    <component :is="item.iconType" class="itemLogoSub"></component>
                    <span v-if="!isCollapse" class="itemSpanSub">{{item.meta.title}}</span>
                </template>
                <el-menu-item :index="itemSub.routeTo" class="elSubMenuItemClass" v-for="itemSub in item.children" :key="itemSub.id">
                    <component :is="itemSub.iconType" class="itemLogo"></component>
                    <span class="itemSpan">{{itemSub.meta.title}}</span>
                </el-menu-item>
            </el-sub-menu>
        </el-sub-menu>
        <el-menu-item :index="barItem.routeTo" class="elMenuItemClass" v-else>
            <template #title v-if="isCollapse">{{barItem.meta.title}}</template>
            <component :is="barItem.iconType" class="itemLogo"></component>
            <span v-if="!isCollapse" class="itemSpan">{{barItem.meta.title}}</span>
        </el-menu-item>
    </div>
</template>

<script>
export default {
    name: "AsideBarItem",
    props: ['barItem'],
    data() {
        return {

        }
    },
    computed: {
        isCollapse() {
            return this.$store.state.isCollapse
        }
    }
}
</script>

<style scoped lang="less">
    .routeLinkClass {
        text-decoration: none;
    }
    .barItem {
        width: 100%;
        display: flex;
        align-items: center;
        overflow: hidden;
        .itemLogo {
            font-size: 17px;
            padding-right: 5%;
        }
        .itemSpan {
            font-size: 17px;
            //去除光标
            caret-color: transparent;
        }
        .elMenuItemClass {
            margin: 0;
            padding: 0;
            width: 100%;
            overflow: hidden;
        }
        .elSubMenuItemClass {
            margin: 0;
            padding: 0;
            width: 100%;
            overflow: hidden;
            .itemLogo {
                font-size: 14px;
                padding-right: 5%;
            }
            .itemSpan {
                font-size: 14px;
                //去除光标
                caret-color: transparent;
            }
        }
    }

    .itemLogoSub {
        font-size: 14px;
        padding-right: 5%;
    }
    .itemSpanSub {
        font-size: 14px;
        //去除光标
        caret-color: transparent;
    }

    .fade-leave, .fade-enter-to {
        opacity: 1;
    }
    .fade-leave-active, .fade-enter-active {
        transition: all 1.5s;
    }
    .fade-leave-to, .fade-enter {
        opacity: 0;
    }
</style>